<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div,img{
		width: 200px;
		height: 150px;
		position: relative; /* 相对定位 */
	}
	img{
		position: absolute;  绝对定位
	}
	div{
		overflow: hidden;  /* 超出范围的不显示 */
	}
</style>
<script type="text/javascript">
	onload = function(){
		var arr = document.getElementsByTagName("img");
		for(var i = 0;i<arr.length;i++){
			arr[i].style.left=i*200+"px";
		}
	}
	onclick = function(){
		change();
		
	}
		var timer = setInterval(change,2000);
	
	
	function change(){
	var moveTimer = setInterval(function(){
		var arr = document.getElementsByTagName("img");
		for(var i=0;i<arr.length;i++){
			var oldLeft = parseInt(arr[i].style.left);
			oldLeft -=2;
			
			if(oldLeft<=-200){
				oldLeft = 400;
				clearInterval(moveTimer);
			}
			arr[i].style.left = oldLeft+"px";
		} 
	},10)
  }
	function stop(){
		console.log("停止");
		clearInterval(timer);
	}
	
	function start(){
		stop();          //停止之前的计时器 
		console.log("开始");
	   timer = setInterval(change,2000); 
	}
	onblur = function(){
		stop();
	}
	onfocus = function(){
		start();
	}
</script>
</head>
<body>
<div onmouseover="stop()" onmouseout="start()">
	<img alt="" src="../imgs/3.jpg">
	<img alt="" src="../imgs/5.jpg">
	<img alt="" src="../imgs/6.jpg">
</div>
</body>
</html>